<template>
	<view class="container">
		<view class="form">
			<view class="form-row-item">
				<view class="label">
					头像
				</view>
				<view class="content" @tap="updateAvatar">
					<image src="/static/images/default-avatar.png" v-if="userInfo.avatar === '默认头像' || !userInfo.avatar"
						mode="" class="avatar"></image>
					<image :src="userInfo.avatar | formatFile" v-else mode="" class="avatar"></image>
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-row-item">
				<view class="label">
					手机号
				</view>
				<view class="content">
					{{userInfo.phone}}
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-row-item" @tap="$myUni.navTo('/pages/user/edit-password')">
				<view class="label">
					修改密码
				</view>
				<view class="content">
					<u-icon name="arrow-right" size="30"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from '../../utils/uni-api'
	import {
		uploadImage
	} from '../../utils/upload'
	import {
		updateAvatar
	} from '@/api/user.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			updateAvatar() {
				uploadImage(res => {
					updateAvatar({
						avatar: res.message
					}).then(res => {
						toast('修改成功')
						this.$store.dispatch('user/getUserInfo');
					})
				}, 1)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		justify-content: flex-end;
	}

	.form {
		padding: 0;

		.form-row-item {
			height: 108rpx;
			padding: 0;
		}
	}

	.avatar {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
</style>